<template>
  <div>
  
    
    <!-- <vueDraggable></vueDraggable> -->
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <div id="pieEchart">
      <div ref="pieEchart" :style="{ width: '100%', height: '100%' }"></div>
    </div>
    <!-- <div ref="myPieEchart" style="width: 400px;height:300px;"></div> -->
    <br />
    <div ref="myEchart" style="width: 600px; height: 200px"></div>
    <br />
    <div ref="myZXEchart" style="width: 700px; height: 400px"></div>
    
   
  </div>
</template>

<script>

const echarts = require("echarts");
// const elementResizeDetectorMaker = require("element-resize-detector");
// import vueDraggable from "@/components/draggable/draggable";
export default {
  name: "pieEchart",
  data() {
    return {
     
      echarts: [],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  components: {
    // vueDraggable
  },
  created() {
    
    console.log(this.$route);
    this.$nextTick(() => {
      // this.initPieChart();
      // this.initChart();
      this.initMyChart();
      this.initMyZXChart();
      // var erd = elementResizeDetectorMaker();
      const that = this;
      // erd.listenTo(document.getElementById("pieEchart"), function(element) {
      //   var width = element.offsetWidth;
      //   var height = element.offsetHeight;
      //   that.$nextTick(function() {
      //     // console.log("Size: " + width + "x" + height, that.echarts);
      //     // this.$refs.pieEchart.style.height = this.$refs.pieEchart.clientWidth / 3 * 2 + 'px'
      //     //使echarts尺寸重置
      //     that.echarts.length &&
      //       that.echarts.map(item => {
      //         item.resize();
      //       });
      //   });
      // });
    });
  },
  methods: {
   
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    initChart() {
      var e = 80;
      var chart = echarts.init(this.$refs.pieEchart);
      console.log(chart, "chart1");
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: true,
        },
        color: ["#8080ff", "#30a2ed", "#ff7200", "#999", "yellow"],
        legend: {
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["45%", "85%"],
          hoverAnimation: false,
          clockwise: true, // 是否顺时针
          zlevel: 10,
          top: 20,
          label: {
            normal: {
              position: "outside",
              color: "#000",
              fontSize: 12,
              formatter: function (params) {
                return params.name + "\n" + params.percent + "%";
              },
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              color: "#000",
              show: true,
            },
          },
          data: [
            { value: 20, name: "EAST报送" },
            { value: 30, name: "保单登记" },
            { value: 20, name: "稽核" },
            { value: 17, name: "统信" },
            { value: 13, name: "日常报表" },
          ],
        },
      };
      chart.setOption(option);
      this.echarts[0] = chart;
    },

    initPieChart() {
      // 基于准备好的dom，初始化echarts实例
      let myPieEchart = echarts.init(this.$refs.myPieEchart);

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myPieEchart.setOption(option);
    },
    initMyChart() {
      // 基于准备好的dom，初始化echarts实例
      let myPieEchart = echarts.init(this.$refs.myEchart);

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myPieEchart.setOption(option);
    },
    initMyZXChart() {
      // 基于准备好的dom，初始化echarts实例
      let myPieEchart = echarts.init(this.$refs.myZXEchart);

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "各分公司不合规数据占比",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["四川", "北京"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myPieEchart.setOption(option);
    },
  },
};
</script>

<style>
</style>
